<template>
  <div>{{ counter }}</div>
  <div>{{ doublecounter }}</div>
  <button @click="doubleClick">counter+1</button>
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))">
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.id }} - {{ item.name }} - {{ item.completed ? '已完成' : '未完成' }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
type Todo = {
  id: number
  name: string
  completed: boolean
}
export default defineComponent ({
  name: 'ComputedAndMethods',
  data () {
    return {
      counter: 2,
      items: [] as Todo[],
      todoName: ''
    }
  },
  computed: { // 标识函数返回值类型
    doublecounter(): number {
      return this.counter * 2
    }
  },
  methods: { // 标识函数形参类型和返回值类型
    doubleClick(): void {
      this.counter ++
    },
    addTodo (todo: Todo): void {
      this.items.push(todo)
      this.todoName = ''
    },
    newTodo (todoName: string): Todo {
      return {
        id: this.items.length + 1,
        name: todoName,
        completed: false
      }
    }
  }
})
</script>

<style scoped>
</style>